<template>
  <div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item>面经后台</el-breadcrumb-item>
  <el-breadcrumb-item>面经管理</el-breadcrumb-item>
</el-breadcrumb>
<!-- 抽屉 -->
<el-drawer
  title="添加面经"
  :visible.sync="showDrawer"
  :size="700">

  <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="stem">
          <el-input v-model="ruleForm.stem"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <quill-editor v-model="ruleForm.content" @blur="$refs.ruleForm.validateField('content')">
          </quill-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确认</el-button>
          <el-button @click="showOn">取消</el-button>
        </el-form-item>
      </el-form>
</el-drawer>

<el-drawer
 class="lxD"
  :title="ruleForm.stem"
  :visible.sync="drawer"
  :size="700">
  <span v-html="ruleForm.content"></span>
</el-drawer>

<el-card class="box-card">
  <div slot="header" class="clearfix">
    <el-row type="flex" justify="space-between">
      <span>一共{{total}}条数据</span>
    <el-button type="primary" round @click="showOn">+ 添加面经</el-button>
    </el-row>
  </div>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="stem"
      label="标题"
      width="180">
    </el-table-column>
    <el-table-column
      prop="creator"
      label="作者"
      width="180">
    </el-table-column>
    <el-table-column
      prop="likeCount"
      label="点赞">
    </el-table-column>

    <el-table-column
      prop="views"
      label="浏览数">
    </el-table-column>

    <el-table-column
      prop="createdAt"
      label="更新时间">
    </el-table-column>

    <el-table-column
      label="操作"
      width="100">
     <template #default="{ row }">
<el-row class="xx" type="flex" justify="space-between">
   <i class="el-icon-view" ref="xxx" @click="selectOne(row.id)"></i>
   <i class="el-icon-edit-outline" @click="selectOne(row.id)"></i>
   <i class="el-icon-delete" @click="del(row.id)"></i>
</el-row>
     </template>
    </el-table-column>
  </el-table>

  <el-row>
    <el-pagination
  background
  @current-change="pageChange"
  layout="prev, pager, next"
  :total="pageTotal*10">
</el-pagination>
  </el-row>
</el-card>
</div>
</template>

<script>
import { getManages, deleteManage, addManage, selectOnce, updateManage } from '../../../api/manage'
export default {
  data () {
    return {
      tableData: [],
      total: 0,
      // 每一页多少条数据
      pageSize: 10,
      // 当前在第几页
      currentPage: 1,
      pageTotal: 0,
      // 控制抽屉显示
      showDrawer: false,
      numberValidateForm: {
        age: ''
      },
      drawer: false,
      rules: {
        stem: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },
      // 是否是预览
      isPreview: false,
      // 面经表单对象
      ruleForm: {
        // 标题
        stem: '',
        // 内容
        content: ''
      }
    }
  },
  created () {
    this.getManagesList()
  },
  methods: {
    async getManagesList () {
      const res = await getManages({
        current: this.currentPage,
        pageSize: this.pageSize
      })
      console.log(res)
      this.tableData = res.data.data.rows
      this.total = res.data.data.total
      this.pageTotal = res.data.data.pageTotal
    },
    pageChange (page) {
      this.currentPage = page
      this.getManagesList()
    },
    oneshow () {
      this.drawer = !this.drawer
    },
    // 删除
    async del (id) {
      const res = await deleteManage(id)
      console.log(res)
      this.getManagesList()
    },
    showOn () {
      this.showDrawer = !this.showDrawer
      this.ruleForm.stem = ''
      this.ruleForm.content = ''
    },
    async submit () {
      this.$refs.ruleForm.validate(async (valid) => {
        // 表单正确
        if (valid) {
          // 判断是新增还是编辑
          // 可以根据id判断
          if (this.ruleForm.id) {
            // 调用编辑接口
            // 解构出来id、标题（stem）和内容（content）
            const { id, stem, content } = this.ruleForm
            // 把id、标题（stem）和内容（content）拼接成对象
            await updateManage({ id, stem, content })
          } else {
            // 调用接口，新增面经
            await addManage(this.ruleForm)
          }
          // 关闭抽屉
          this.showDrawer = false
          // 列表需要刷新
          this.getManagesList()
        } else {
          // 表单无效
          console.log('error submit!!')
          return false
        }
      })
    },
    async selectOne (id) {
      // 我应该要把这分id保存起来
      console.log(id)
      const res = await selectOnce(id)
      if (this.$refs.xxx) {
        this.oneshow()
      } else {
        this.showOn()
      }
      this.ruleForm = res.data.data
      console.log(res)
    }
    // async updateL () {
    //   const res = await updateManage({
    //     id,
    //     stem: this.ruleForm.stem,
    //     content: this.ruleForm.content
    //   })
    //   console.log(res)
    // }
  }
}
</script>

<style lang="scss">
.el-icon-arrow-right{
  // margin-top: 20px;
}
.box-card{
  margin-top: 20px;
}
.el-drawer{
  text-align: left;
  .el-form{
    width: 650px;
  }
}
.xx{
  cursor: pointer;
}
.xx i:hover{
  color: rgb(16, 173, 247);

}
.el-pagination{
  margin-top: 10px;
}
.cell{
  word-break: break-all;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2; /* 这里是超出几行省略 */

    overflow: hidden;
}
.ql-editor{
         height:300px;
     }

</style>
